<template>

<table>
  <tr v-for="(dataItem,dataIndex) in data" :key="dataIndex">
    <td v-for="(tableColumn,tableColumnIndex) in tableColumns" :key="tableColumnIndex">{{dataItem[tableColumn]?dataItem[tableColumn].value:''}}</td>
  </tr>
</table>

</template>

<script>
export default {
  data() {
    return {
      data: [],
      tableColumns: [],

      
    };
  },
  mounted(){
    let listData=[]

    for(let i=0;i<10;i++)
    {
      listData.push({key:'key_'+i,value:'value_'+i})
    }


    let tableData =this.arrayToTableData(listData,3)

    this.data = tableData.tableData;
    this.tableColumns = tableData.tableColumns;
  },
  methods: {
    arrayToTableData(data, columnCount) {
      let tableData = [];
      let tableColumns = [];
      for (let index = 0; index < columnCount; index++) {
        tableColumns.push("column_" + index );
      }

      for (let index = 0; index < data.length; index += columnCount) {
        let rowData = {};
        for (let columnIndex = 0; columnIndex < columnCount; columnIndex++) {
          rowData["column_" + columnIndex] = data[index + columnIndex];
        }
        tableData.push(rowData);
      }

      return {
        tableData,
        tableColumns,
      };
    },
  },
};
</script>

<style>
</style>